<template>
  <div>
    <el-row>
      <el-col :span="3"
        ><el-button @click="open" type="primary"
          >添加{{ addName }}</el-button
        ></el-col
      >
      <slot name="select"></slot>
      <el-col :span="8">
        <el-input v-model="key" clearable :placeholder="`请输入${searchPlace}`" @clear="search" @change="search" @input="search"/>
      </el-col>
      <slot name="input"></slot>
      <el-col :span="3">
        <el-button @click="search" type="primary">搜索</el-button></el-col
      >
    </el-row>
  </div>
</template>
<script>
export default {
  name: "t-head",
  props: {
    addName: {
      type: String,
      default: "",
    },
    searchPlace: {
      type: String,
      default: "搜索内容",
    },
  },
  data() {
    return {
      key: "",
    };
  },
  methods: {
    open() {
      this.$emit("add");
    },
    search() {
      this.$emit("search", this.key);
    },
  },
};
</script>